<template>
  <div id="operStatementAccount" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">运营管理</BreadcrumbItem>
				<BreadcrumbItem to="/operation/statementAccount">对账单</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>导出数据</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="账期">
              <Row>
                <Col :md="9" style="padding:0;">
                  <DatePicker v-model="searchForm.year" type="year" @on-change="yearChange" :clearable="false" :editable="false" :options="yearOption" placeholder="请选择"></DatePicker>
                </Col>
                <Col :md="3">年</Col>
                <Col :md="9" style="padding:0;">
                  <Select v-model="searchForm.month" placeholder="请选择" clearable>
                    <Option v-for="(v,i) in months" :value="v" :key="`search-month-option-${i}`">{{v}}</Option>
                  </Select>
                </Col>
                <Col :md="3">月</Col>
              </Row>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="渠道类型">
              <Select placeholder="请选择" v-model="searchForm.channel" clearable>
                <Option :value="1">个人</Option>
                <Option :value="2">中间商</Option>
              </Select>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="名称">
              <Input v-model="searchForm.salesName" placeholder="名称关键词" clearable />
            </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
						<th>账期</th>
						<th>名称</th>
						<th>推荐司机数</th>
					</thead>
					<tbody>
            <tr v-for="(v,i) in pageData.thisPageElements" :key="`seller-list-key-${i}`">
							<td>{{v.date}}</td>
							<td>{{v.salesName}}</td>
							<td>{{v.driverCount}}</td>
						</tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="3">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

			<Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex'
  import moment from 'moment'
  import {download}  					 from '@/util/request'

  export default {
    data(){
      return {
        current:1,

        searchForm:{
          year:moment([moment().year()]).toDate(),
          month:null,
          salesName:'',
          channel:null
        },
        submitForm:{},
        yearOption:{
          disabledDate:(d) => {
            return moment(d).year() > moment().year();
          }
        }
      };
    },
    computed:{
      ...mapState('operation/operStatementAccount',['pageData','isLoading']),
      months(){
        let isCurYear = moment(this.searchForm.year).year() === moment().year();
        let month = isCurYear ? moment().month() + 1 : 12;
        let monthlist = [];
        for (let i = 1; i <= month; i++){
          monthlist.push(i);
        }
        return monthlist;
      },
    },
    methods:{
      moment,
      ...mapActions('operation/operStatementAccount',['reload']),
      yearChange(v){
        let i = this.months.findIndex(o => o === this.searchForm.month);
        if (i < 0) {
          this.searchForm.month = null;
        }
      },
      search(){
        this.loadPage(1);
      },
      loadPage(n){
				this.current = n;
        this.submitForm = {...this.searchForm};
        this.submitForm.year = this.submitForm.year.getFullYear();
				this.reload({
					pageNum:this.current,
					...this.submitForm
				});
			},
      exportData(){
        this.submitForm = {...this.searchForm};
        this.submitForm.year = this.submitForm.year.getFullYear();
        download('/salesBills/export',this.submitForm);
      }
    },
    mounted(){
      this.loadPage(1);
    }
  }
</script>
